<template>
  <div>
    <el-tree
        lazy
        :props="props"
        :load='loadNode'
        default-expand-all
        :expand-on-click-node="false"
        @node-click='getPid'
        :render-content="renderContent">
    </el-tree>

    <el-dialog
        :title='title'
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
    >
        <el-input v-model="adName"></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:'ContentNav',
  inject:['reload'],
  data(){
    return{
      title:'添加广告',
      dialogVisible:false,
      adName:'',
      pid:'',
      props:{
          label:'name',
          children:''
      }
    }
  },
  methods:{
    // 获取pid
    getPid(data){
        this.$emit('getid',data)
    },
    submit(){
        if(this.title == '添加广告'){
            // 等会调用新增功能
            this.$api.getInsertContentCategory({
                pid:this.pid,
                name:this.adName
            })
            .then(data=>{
                if(data.status == 200){
                    this.$message({
                        type:'success',
                        message:'添加成功'
                    })
                    this.dialogVisible = false;
                    // 要进行强制刷新页面
                    this.reload()
                }else{
                    this.$message({
                        type:'warnimg',
                        message:'添加失败'
                    })
                }
            })
        }else{
            // 等会调用修改功能
            this.$api.getUpdateContentCategory({
                id:this.pid,
                name:this.adName
            })
            .then(data=>{
                if(data.status == 200){
                    this.$message({
                        type:'success',
                        message:'修改成功'
                    })
                    this.dialogVisible = false;
                    this.reload()
                }else{
                    this.$message({
                        type:'warnimg',
                        message:'添加失败'
                    })
                }
            })
        }
    },
    loadNode(node, resolve){
      if(node.level === 0){
          this.$api.getSelectContentCategoryByParentId({id:1})
          .then(data=>{
            if(data.status == 200){
                return resolve(data.data)
            }else{
                return resolve([])
            }
          })
      }else{
          this.$api.getSelectContentCategoryByParentId({id:node.data.pid})
          .then(data=>{
            if(data.status == 200){
                return resolve(data.data)
            }else{
                return resolve([])
            }
          })
      }
    },
    append(data) {
        this.title='添加广告';
        this.dialogVisible = true;
        this.pid=data.pid;
    },

    remove(node,data) {
        this.$confirm('是否删除，删除后不能恢复')
        .then(()=>{
            this.$api.getDeleteContentCategoryById({id:data.pid})
        .then(data=>{
            if(data.status == 200){
                    this.$message({
                        type:'success',
                        message:'删除成功'
                    })
                    this.dialogVisible = false;
                    this.reload()
                }else{
                    this.$message({
                        type:'warnimg',
                        message:'删除失败'
                    })
                }
            })
        })
        .catch(()=>{
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        })
    },

    update(node,data){
        this.title='修改广告';
        this.dialogVisible = true;
        this.pid = data.pid;
        console.log(node,data)
    },

    renderContent(h, { node, data }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text" on-click={ () => this.append(data) }>添加</el-button>
              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
              <el-button size="mini" type="text" on-click={ () => this.update(node, data) }>修改</el-button>
            </span>
          </span>);
      },
      handleClose(done){
          this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(error => {console.log(error)});
      }
  
  }
}
</script>

<style>

</style>